<template>
  <div>
    <!-- 用户信息 -->
    <div class="user-info flex-row-space-between">
      <div class="flex-row-start">
        <img
          class="avatar"
          :src="userinfo.avatar"
          alt=""
        >
        <div>
          <div>{{ userinfo.name }}</div>
          <div>{{ userinfo.mobile }}</div>
        </div>
      </div>
      <img class="phone" src="@/assets/dianhua.png" alt="" @click="callPhone">
    </div>

    <div class="title">待处理订单</div>

    <div v-for="(item, index) in orderList" :key="index" class="order-info" @click="navToOrderDetail(item.id)">
      <div class="flex-row-space-between">
        <div class="flex-row-start">
          <img
            class="order-avatar"
            :src="userinfo.avatar"
            alt=""
          >
          <div>{{ item.name }}</div>
        </div>
        <div v-if="item.jiedan_type == 1">待接单</div>
        <div v-if="item.jiedan_type == 2">已接单</div>
        <div v-if="item.jiedan_type == 3">已完成</div>
        <div v-if="item.jiedan_type == 4">已取消</div>
      </div>
      <div>预约 <span>{{ item.time }}</span> 上门回收服务</div>
    </div>
  </div>
</template>

<script>
import { getOrderInfo } from '../../api/apis'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      orderList: [],
      userinfo: {}
    }
  },

  mounted() {
    if (getToken()) {
      this.getOrder()
    } else {
      this.$router.push({
        path: '/login'
      })
    }
  },

  methods: {

    callPhone() {
      window.location.href = 'tel://' + this.userinfo.mobile
    },

    navToOrderDetail(id) {
      this.$router.push({
        path: '/orderdetail',
        query: {
          id
        }
      })
    },

    getOrder() {
      const id = this.$route.query.id
      this.id = id
      getOrderInfo(id).then(res => {
        this.orderList = res.data.data
        this.userinfo = res.data.user
      })
    }
  }
}
</script>

<style scoped>
body {
  font-size: 36px;
  color: #444444;
}

.user-info {
  margin: 20px;
  padding: 30px 40px;
  background: #fff;
  border-radius: 10px;
  line-height: 1.8;
  color: #444444;
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-right: 30px;
}

.phone {
  height: 80px;
  width: 80px;
  padding: 6px;
  background: #5edb87;
  border-radius: 50%;
}

.title {
  font-size: 36px;
  font-weight: 500;
  margin: 70px 20px 40px 20px;
}
.order-info{
  margin: 20px;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  color: #444444;
  line-height: 2.2;
}
.order-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 20px;
}

.order-info span{
  color: #5edb87;
}
</style>
